<template>
  <!-- 搜索 -->
  <div>
    <transition name="el-fade-in-linear">
      <div v-if="addQuestion === false">
        <div class="filter-bar">
          <el-button
            type="primary"
            plain
            size="small"
            @click="addHandler"
            v-permission="'exam:question:create'"
            >新增试题</el-button
          >
        </div>

        <QuestionList @edit="handleEdit"></QuestionList>
      </div>
    </transition>

    <div v-if="addQuestion === true">
      <NewQuestion :addForm.sync="addForm"></NewQuestion>
    </div>
  </div>
</template>

<script>
import QuestionItem from './components/QuestionItem'
import QuestionList from './components/QuestionList'
import NewQuestion from './components/NewQuestion'
import { getQuestionDetail } from '@/api/examQuestion'
export default {
  name: 'ExamPaperIndex',
  components: {
    QuestionItem,
    QuestionList,
    NewQuestion,
  },
  data() {
    return {
      addQuestion: false,
      addForm: {
        subject_id: '',
        directory_id: '',
        tag_id: '',
        difficulty: 1,
        is_true_question: 1,
        quest_type: '',
      },
    }
  },
  methods: {
    // 新增按钮
    addHandler() {
      this.addQuestion = !this.addQuestion
    },

    // 编辑按钮
    async handleEdit(val) {
      this.addForm = await getQuestionDetail(val)
      this.addForm.tag_id = this.addForm.tag_id.split(',').map(Number)
    },

    // 初始化rowData
    rowDataInit() {
      this.addForm = {
        subject_id: '',
        directory_id: '',
        tag_id: '',
        difficulty: 1,
        is_true_question: 1,
        quest_type: '',
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.filter-bar {
  display: flex;
  justify-content: flex-end;
  padding: 16px;
  background-color: #fff;
}
</style>
